<template>
    <div>
        <n-grid :cols="12" item-responsive responsive="screen">
            <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
                <n-space vertical>
                    <n-button type="primary" @click="addTable">
                        创建测验
                    </n-button>
                    <n-tabs default-value="underway" v-model:value="tabKey" justify-content="space-evenly" type="line">
                        <n-tab-pane name="underway" tab="未开始">
                        </n-tab-pane>
                        <n-tab-pane name="running" tab="进行中">
                        </n-tab-pane>
                        <n-tab-pane name="end" tab="结束">
                        </n-tab-pane>
                    </n-tabs>
                    <template v-for="exam in examList">
                        <n-card v-if="judgeState(exam)">
                            <n-thing>
                                <template #header>
                                    <n-button text>{{exam.title}}</n-button>
                                </template>
                                <template #header-extra>
                                    <n-space>
                                        <n-tag type="info">
                                            积分:{{exam.credit}}
                                        </n-tag>
                                        
                                            <n-tag type="info" v-if="new Date(exam.startTime)>new Date()">    
                                                未开始
                                            </n-tag>
                                            <n-tag type="success" v-if="new Date(exam.endTime)>new Date() && new Date(exam.startTime)<new Date()">    
                                                进行中
                                            </n-tag>
                                            <n-tag type="error" v-if="new Date(exam.endTime)<new Date()">    
                                                已结束
                                            </n-tag>
                                        
                                    </n-space>
                                </template>
                                <template #action>
                                    <n-space justify="space-between">
                                        <n-space>
                                        <n-tag type="info">
                                            开始时间:{{exam.startTime}}
                                        </n-tag>
                                        <n-tag type="info">
                                            结束时间:{{exam.endTime}}
                                        </n-tag>
                                        </n-space>
                                        <n-space justify="end"> 
                                            <n-button size="small" v-if="new Date(exam.startTime)<new Date()" @click="handleCount(exam.EID)">
                                                <template #icon>
                                                    <n-icon>
                                                        <ChartMultiple20Filled />
                                                    </n-icon>
                                                </template>
                                                测验统计
                                            </n-button>
                                            <n-button size="small"  @click="handleEdit(exam.EID)">
                                                <template #icon>
                                                    <n-icon>
                                                        <Edit16Filled />
                                                    </n-icon>
                                                </template>
                                                编辑测验
                                            </n-button>
                                            <n-button size="small" @click="handleDelete(exam.EID)">
                                                <template #icon>
                                                    <n-icon>
                                                        <Delete20Filled />
                                                    </n-icon>
                                                </template>
                                                删除测验
                                            </n-button>
                                        </n-space>
                                    </n-space>
                                </template>
                            </n-thing>
                        </n-card>
                    </template>
                </n-space>
            </n-gi>
        </n-grid>
    </div>
</template>
<script lang="ts" setup>
import { Delete20Filled, Edit16Filled, ChartMultiple20Filled } from '@vicons/fluent';
import { onMounted, ref, } from 'vue';
import { useRouter ,useRoute } from 'vue-router';
import { getTableList ,deleteExam } from '@/api/teacher/exam';
import { useDialog, useMessage } from 'naive-ui';
const router = useRouter();
const route = useRoute();
const examList = ref();
const tabKey = ref('underway');

function judgeState(exam){
    if(tabKey.value == 'underway'){
        return new Date(exam.startTime)>new Date();
    }
    else if(tabKey.value == 'running'){
        return new Date(exam.endTime)>new Date() && new Date(exam.startTime)<new Date();
    }
    else if(tabKey.value == 'end') {
        return new Date(exam.endTime)<new Date();
    }

}

onMounted(async () => {
    examList.value = await getTableList({courseID: route.params.courseID});
});
function addTable() {
    router.push({ name: 'teacher_addExam' });
}

async function reload(){
    examList.value = await getTableList({courseID: route.params.courseID});
}

const dialog = useDialog();
const message = useMessage();

const handleEdit = (EID)=>{
    router.push({name:'teacher_editExam',params:{EID:EID}});
}

const handleCount = (EID)=>{
    router.push({name:'teacher_countExam',params:{EID:EID}});
} 

const handleDelete = (EID) => {
    dialog.info({
        title: '提示',
        content: `您想删除这道题吗`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            //message.success('删除成功');
            deleteExam({ EID: EID }).then(
                () => {
                    message.success('成功');
                    reload();
                }
            )
        },
        onNegativeClick: () => { },
    });
}
</script>